<template>
  <view class="login-container">
    <view class="">
      <view class="login-header" :style="{paddingTop: barHeight + 'px'}">
        <view class="header-view">
          <view class="" @click="handleClose">
            <u-icon name="close" size="32"></u-icon>
          </view>
        </view>
        <view class="logo">
          <image class="img" src="/static/images/login/welcome.png" mode="widthFix"></image>
        </view>
      </view>
      <view class="login-cont">
        <view class="login-view login-quick">
          <view class="form-view">
            <u-form :model="registerForm" ref="registerForm">
              <u-form-item label-position="top" :border-bottom="false">
                <image src="/static/images/login/name.png" class="form_icon" mode="widthFix"></image>
                <u-input v-model="registerForm.mobile" maxlength="11" placeholder="请输入手机号" />
              </u-form-item>
              <u-form-item label-position="top" :border-bottom="false">
                <image src="/static/images/login/code.png" class="form_icon" mode="widthFix"></image>
                <u-input v-model="registerForm.captcha" placeholder="请输入图片验证码" maxlength="4" />
                <u-image slot="right" width="120" height="60" :src="captcha_url"
                  @click="handleChangeCaptchalUrl"></u-image>
              </u-form-item>
              <u-form-item label-position="top" :border-bottom="false">
                <image src="/static/images/login/code.png" class="form_icon" mode="widthFix"></image>
                <u-input v-model="registerForm.sms_code" placeholder="请输入短信验证码" maxlength="6" />
                <!-- <u-button slot="right" type="error" size="mini" @click="handleCode">{{codeTips}}</u-button> -->
                <view class="login_type" @click="handleCode">{{codeTips}}</view>
                <u-verification-code seconds="60" ref="uCode" @change="handleCodeChange"></u-verification-code>
              </u-form-item>
              <u-form-item label-position="top" :border-bottom="false">
                <image src="/static/images/login/pwd.png" class="form_icon" mode="widthFix"></image>
                <u-input type="password" v-model="registerForm.password" placeholder="请输入密码" />
              </u-form-item>
              <u-form-item label-position="top" :border-bottom="false">
                <image src="/static/images/login/code.png" class="form_icon" mode="widthFix"></image>
                <u-input v-model="registerForm.refererCode" disabled placeholder="请输入分享码" />
              </u-form-item>
            </u-form>
            <view class="u-text-right login-text u-f-ac u-f-jsb">
              <navigator url="/pages/auth/login" hover-class="none">已有账号，去登录</navigator>
            </view>
            <view class="recharge_btn u-f-ajc" :disabled="login_disabled_valsms" @click="handleValSmsCode">
              立即注册
            </view>
            <view class="agreement u-flex">
              <u-checkbox v-model="policyCheck" size="24" active-color="#EC6F28" @change="checkboxChange"></u-checkbox>
              <view class="agreement-text">
                登录或注册代表您同意<text class="txt" @click="showPolicy = true">《{{site.site_name}}隐私政策》</text>
              </view>
            </view>
          </view>
        </view>
        
      </view>
      <!-- 因上架AppStore，暂时先去掉快捷登录。TODO 许立鹏 -->
      <!-- /*  */ -->

    </view>
    
    <!-- 隐私政策弹出层 -->
    <u-popup class="policy-view" v-model="showPolicy" mode="bottom" length="70%" border-radius="20"
      :safe-area-inset-bottom="true">
      <view class="u-p-30 u-text-center" style="font-weight: 600;">
        {{ policy.article_name }}
      </view>
      <scroll-view scroll-y="true" class="policy-content" :style="{height: scrollHeight * 0.7 + 'px'}">
        <u-parse :html="policy.content"></u-parse>
      </scroll-view>
    </u-popup>
    <u-no-network></u-no-network>
  </view>
</template>

<script>
  import * as API_Article from '@/api/article.js';
  import * as API_Haibao from '@/api/haibao.js';
  import * as API_Passport from '@/api/passport.js';
  import * as API_Common from '@/api/common.js';
  import {
    RegExp
  } from '@/ui-utils/index.js';
  import Cache, {
    Keys
  } from '@/utils/cache.js';
  export default {
    data() {
      return {
        // #ifdef MP
        barHeight: this.customBar, //状态栏+导航栏高度
        // #endif
        // #ifdef APP-PLUS || H5
        barHeight: this.statusBar, //状态栏高度
        // #endif
        policyCheck: true, //已阅读并同意协议
        showPolicy: false, //显示协议
        policy: '', //协议内容
        site: Cache.getItem(Keys.site),
        
        uuid: Cache.getItem('uuid'),
        // 会员注册 表单
        registerForm: {
          mobile: '',
          password: '',
          refererCode: '',
          sms_code: '',
          captcha: '',
        },
        captcha_url: '', //图片验证码
        codeTips: '获取验证码',
        agreement: '', //注册协议
        agreed: true, //同意注册协议
        showAgreement: false, //显示注册协议
        scrollHeight: uni.getSystemInfoSync().windowHeight - 130 //协议内容滚动高度
      };
    },
    computed: {
      //立即注册 按钮是否禁用
      login_disabled_valsms() {
        const {
          mobile,
          password,
          refererCode
        } = this.registerForm
        return !(mobile && password && refererCode)
      },
    },
    onLoad(e) {
      console.log(e)
      if (e.refererCode) this.registerForm.refererCode = e.refererCode
      // this.getArticleByPosition()
      this.handleChangeCaptchalUrl()
      this.getArticleDetail()
    },
    methods: {
      xiazai() {
        let url = 'http://xingruiappdownload.oss-cn-beijing.aliyuncs.com/xingbaihui.apk'
        if (uni.getSystemInfoSync().platform === 'ios') {
          url = 'https://www.lanzoui.com/xingruizhubao';
        }
        this.$qqyUtils.copyBankCard(url)
      },
      //获取隐私政策
      getArticleDetail() {
        API_Article.getArticlesByPosition('REGISTRATION_AGREEMENT').then(response => {
          this.policy = response
        })
      },
      //获取注册协议
      getArticleByPosition() {
        API_Article.getArticleByPosition('REGISTRATION_AGREEMENT').then(response => {
          this.agreement = response
          this.showAgreement = true
        })
      },
      //是否同意注册协议
      handleAgreement(agreed) {
        if (agreed) {
          this.agreed = agreed
          this.showAgreement = false
        } else {
          uni.switchTab({
            url: '/pages/tabs/home/home'
          })
        }
      },
      // 获取图片验证码
      async handleChangeCaptchalUrl() {
        console.log(this.uuid)
        this.captcha_url = await API_Common.getValidateCodeUrl(this.uuid, 'REGISTER')
        console.log('查看验证码', this.captcha_url)
      },
      // 获取短信验证码
      handleCode() {
        const {
          mobile,
          captcha
        } = this.registerForm
        if (!mobile) {
          this.$u.toast('请输入手机号')
          return
        } else if (!RegExp.mobile.test(mobile)) {
          this.$u.toast('手机号格式有误')
          return
        } else {
          if (this.$refs.uCode.canGetCode) {
            // 向后端请求验证码
            API_Passport.sendRegisterSms(mobile, captcha).then(res => {
              this.$u.toast('验证码已发送')
              // 通知验证码组件内部开始倒计时
              this.$refs.uCode.start()
            }).catch(this.handleChangeCaptchalUrl)
          } else {
            this.$u.toast('倒计时结束后再发送')
          }
        }
      },
      //验证码发生变化时
      handleCodeChange(text) {
        this.codeTips = text;
      },
      //下一步 验证短信验证码
      async handleValSmsCode() {
        const {
          mobile,
          sms_code
        } = this.registerForm
        await API_Passport.validMobileSms(mobile, 'REGISTER', sms_code).then(() => {
          this.handleConfirmRegister()
        }).catch(this.handleChangeCaptchalUrl)

      },
      //立即注册
      async handleConfirmRegister() {
        if (!this.agreed) {
          this.$u.toast('请先同意注册协议')
          return false
        }
        const {
          password
        } = this.registerForm
        if (!RegExp.password.test(password)) {
          this.$u.toast('密码应为6-20位英文、数字或者特殊字符')
          return false
        }
        let res = await API_Haibao.registerShareWap(this.registerForm)
        console.log(Object.keys(res).length, res)
        if (Object.keys(res).length) {
          this.$u.toast('注册成功')
          // setTimeout(() => {
          //   this.$u.route(`/mine-module/haibao/appDownload`)
          // }, 1200)
        } else {
          this.$u.toast('注册失败')
        }
      },
      
      
      //选择阅读并同意协议
      checkboxChange(e) {
        this.policyCheck = e.value
      },
      //返回上一页
      handleClose() {
        this.back()
        // uni.navigateBack()
      },
      back() {
        // #ifdef H5
        const pages = getCurrentPages()
        if (pages.length > 1) {
          uni.navigateBack(1)
          return
        }
        //使用vue-router返回上一级
        let a = this.$router.go(-1)
        if (a == undefined) {
          //重新定向跳转页面
          // uni.switchTab({
          //     url: '/pages/tabs/mine/mine'
          // });
          uni.navigateTo({
            url: '/pages/tabs/mine/mine'
          });
        }
        return
        // #endif
        uni.navigateBack(1)
      },
      
    }
  }
</script>

<style lang="scss">
  page {
    width: 100%;
    background: url(/static/images/login/bg.png) no-repeat 0 0;
    background-size: 100% 500rpx;
  }

  .login-container {
    background-color: rgba(0, 0, 0, 0);

    .login-header {
      // background-image: url(../../static/images/bg/bg5.png);
      // background-size: 100% 100%;
      color: #FFFFFF;
      padding: 30rpx;
      height: 457rpx;
      background-color: rgba(0, 0, 0, 0);

      .header-view {
        padding: 8rpx 0;
        display: flex;
        justify-content: space-between;
      }

      .logo {
        display: flex;
        justify-content: center;
        margin-top: 70rpx;

        .img {
          width: 500rpx;
          height: 100rpx;
        }
      }
    }

    .login-cont {
      width: 100%;
      margin: -100rpx 0 0;
      border-radius: 40rpx 40rpx 0 0;
      background-color: #fff;
      box-sizing: border-box;

      .login-view {
        padding: 40rpx 60rpx;
        // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);

        .login-text {
          margin: 50rpx 0;
          color: #82848A;
          font-size: 24rpx;
        }

        .agreement {
          padding: 50rpx 10rpx 0;

          /deep/.u-checkbox {
            display: inline-block;
          }

          .agreement-text {
            font-size: 22rpx;

            .txt {
              // color: $u-type-error;
              color: #EC6F28;
            }
          }
        }
      }
    }

    .login-footer {
      margin-top: 100rpx;
    }

    .policy-content {
      padding: 0 30rpx 20rpx 30rpx;
      box-sizing: border-box;
    }
  }

  .wx-auth-container {
    padding-top: 200rpx;

    .logo-info {
      font-size: 45rpx;
      font-weight: 600;
      margin-bottom: 45rpx;
    }

    .tips-view {
      .title {
        font-size: 30rpx;
        font-weight: 600;
        margin: 45rpx 0 30rpx 0;
      }

      .tip {
        color: #909399;
      }
    }

    .btns-view {
      margin: 100rpx 0;
    }

    /deep/ .u-btn--bold-border {
      border: none !important;
    }
  }

  .wx-button {
    background-color: #ffffff !important;

    &::after {
      border: none !important;
    }
  }



  .form_icon {
    width: 30rpx;
    margin-right: 20rpx;
  }


  /deep/ .u-form-item {
    background-color: #F8F8F8 !important;
    border-radius: 50rpx !important;
    padding: 6rpx 30rpx 16rpx !important;
    margin-bottom: 30rpx !important;
  }

  .login_type {
    color: #EC6F28;
  }

  .recharge_btn {
    width: 100%;
    height: 100rpx;
    text-align: center;
    color: #fff;
    background-color: #eb6826;
    border-radius: 50rpx;
    font-size: 34rpx;

    // background: url(/static/images/login/button.png) no-repeat 0 0;
    // background-size: cover;
  }


  .tab-list {
    .tab-item {
      font-size: 34rpx;
      color: #999;
      position: relative;

      text {
        position: relative;
        z-index: 2;
      }
    }

    .tab-active {
      font-weight: 700;
      color: #000;
    }

    .tab-active::after {
      content: '';
      position: absolute;
      left: 50%;
      margin-left: -50rpx;
      top: 30rpx;
      width: 100rpx;
      height: 18rpx;
      border-radius: 40rpx;
      background-color: #eb6826;
      z-index: 1;
    }
  }
</style>
